<template>
    <div class="card-box">
        <v-dialog
            title="预览"
            :show.sync="dialogVisible"
            width="1200px"
            height="120px"
            >
            <div class="center" >
                <el-row class="">
                    <span style="font-size: 18px">单据痕迹：</span>原单
                </el-row>
                <el-row style="text-align: center;padding-bottom: 20px">
                    <span style="font-size: 30px">福田物业</span>
                </el-row>
                <el-row class="row" style="text-align: right">
                    <span>NO:</span><el-input disabled="true" v-model="form.receiptNum" style="width: 20%"></el-input>
                </el-row>
                <el-row class="row">
                    <el-col span="8">
                        <span>客户：</span><el-input disabled="true" v-model="form.client" style="width: 40%"></el-input>
                    </el-col>
                    <el-col span="8" style="text-align: center">
                        <span>房间：</span><el-input disabled="true" v-model="form.room" style="width: 40%"></el-input>
                    </el-col>
                    <el-col span="8" style="text-align: right">
                        <span>时间：</span><el-date-picker format="yyyy-MM-dd" disabled="true" v-model="form.printDate" style="width: 60%"></el-date-picker>
                    </el-col>
                </el-row>
                <el-table :data="form.financeManageReceiptPayments" show-summary="true" class="table">
                    <el-table-column label="序号" type="index" :index="indexMethod" width="80"></el-table-column>
                    <el-table-column label="款项" prop="fund"></el-table-column>
                    <el-table-column label="摘要" prop="digest"></el-table-column>
                    <el-table-column label="费用期间" prop="costDate">
                        <template slot-scope="scope">
                            <el-date-picker type="date"
                                            disabled="true"
                                            value-format="yyyy-MM-dd"
                                            format="yyyy-MM-dd"
                                            v-model="scope.row.costDate"></el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" prop="unitPrice"></el-table-column>
                    <el-table-column label="数量" prop="number"></el-table-column>
                    <el-table-column label="本金" prop="capital"></el-table-column>
                    <el-table-column label="违约金" prop="deditPrice"></el-table-column>
                    <el-table-column label="合计" prop="summation"></el-table-column>
                </el-table>
                <el-row class="row">
                    <el-col span="6">
                        <span>收款人：</span><el-input disabled="true" v-model="form.payee" style="width: 60%"></el-input>
                    </el-col>
                    <el-col span="6">
                        <span>交款日期：</span><el-date-picker disabled="true" format="yyyy-MM-dd" v-model="form.paymentDate" style="width: 60%"></el-date-picker>
                    </el-col>
                    <el-col span="6">
                        <span>交款人（签字）：</span><el-input disabled="true" v-model="form.payer" style="width: 40%"></el-input>
                    </el-col>
                    <el-col span="6">
                        <span>打印日期：</span><el-date-picker disabled="true" format="yyyy-MM-dd" v-model="form.printDate" style="width: 60%"></el-date-picker>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="18">
                        <span>代收单位盖章：</span><label></label>
                    </el-col>
                    <el-col span="3">
                        <span>打印人：</span><label>{{form.printer}}</label>
                    </el-col>
                    <el-col span="3">
                        <span>打印次数：</span><label>{{form.printNum}}</label>
                    </el-col>
                </el-row>
            </div>
        </v-dialog>
    </div>
</template>

<script>
    import {getfinancedetail} from "../../../api/finance-manage-receiptdetail"
    export default {
        data(){
            return{
                dialogVisible:false,
                form:{},
                tableData:{}
            }
        },
        methods:{
            show(item){
                getfinancedetail(item.receiptId).then(res=>{
                    this.form=res.data.data
                    console.log(this.form)
                    this.dialogVisible=true
                })
            },
            indexMethod(index) {
                return index+1;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .center{
        margin: 15px;
    }
    .row{
        padding-bottom: 20px;
        font-size: 18px;
    }
    .table{
        margin-bottom: 10px;
        text-align: center;
    }

</style>
